<template>
    <div class="root">
        <div class="top">
            <div class="search">
                <div style="display: flex;">
                    <el-input prefix-icon="el-icon-menu" placeholder="请输入员工姓名" v-model="input" clearable></el-input>
                    <el-button class="top-btn" @click="search">搜素</el-button>
                </div>
            </div>
            <div class="add-btn">
                <router-link to="/addUser">
                    <el-button plain class="top-btn">添加员工</el-button>
                </router-link>
            </div>
        </div>
        <div class="bottom">
            <el-table 
            :data="empData" 
            :header-cell-style="{'text-align': 'center'}"
            :cell-style="{'text-align': 'center'}" 
            border 
            style="width: 100%;">
                <el-table-column prop="name" label="员工姓名"></el-table-column>
                <el-table-column prop="username" label="账号"></el-table-column>
                <el-table-column prop="phone" label="手机号"></el-table-column>
                <el-table-column prop="status" label="账号状态">
                    <template slot-scope="scope">
                        {{scope.row.status == 0 ? '禁用' : '正常'}}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-link type="primary" icon="el-icon-edit" :underline="false" @click="forbid(scope.row.id)">{{ scope.row.status == 0 ? '启用' : '禁用' }}</el-link>
                        <el-link type="danger" icon="el-icon-circle-close" :underline="false" @click="delById(scope.row.id)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <div class="footer">
            <el-pagination 
            background 
            layout="prev, pager, next, total"
            @current-change="handleCurrentChange"
            :current-page="params.page"
            :page-size="params.pageSize"
            :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import api from '@/api/request.js'
import router from '@/router'
export default {
    data() {
        return {
            input: '',
            empData: [],
            //分页
            total: 100,
            params: {
                page: 1,
                pageSize: 10,
                name: ''
            }
        }
    },
    methods: {
        //加载页面
        load() {
            api.employeePage(this.params).then(res => {
                // 判断是否登录
                if(res.data.msg == "NOTLOGIN"){
                    router.push('/login');
                }
                this.empData = res.data.data.records;
            }).catch(error => {
                console.log(error);
                this.$message.error('出错啦');
            });
        },
        //分页查询
        handleCurrentChange(page) {
            // 点击分页按钮触发分页
            this.params.page = page
            this.load()
        },
        search() {
            if(this.input === '') {
                this.load();
                return;
            }
            api.getEmpByNameOrUsername(this.input).then(res => {
                if (String(res.data.code) === '1') {
                    this.empData = res.data.data;
                }
            }).catch(error => {
                console.log(error);
                this.$message.error('出错啦');
            });
        },
        delById(id) {
            this.$confirm('确定要删？？？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 删除操作
                api.employeeDel(id).then(res => {
                    if (String(res.data.code) === '1') {
                        this.load();
                        this.$message.success(res.data.data);
                    } else {
                        this.$message(res.data.msg);
                    }
                })
                }).catch(() => {
                this.$message({type: 'info', message: '已取消'});          
            });
        },
        forbid(id) {
            this.$confirm('确定要执行该操作？？？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 禁用/启用操作
                api.empforbid(id).then(res => {
                    if (String(res.data.code) === '1') {
                        this.load();
                        this.$message.success(res.data.data);
                    } else {
                        this.$message(res.data.msg);
                    }
                })
                }).catch(() => {
                this.$message({type: 'info', message: '已取消'});          
            });
        }
    },
    created() {
        this.load();
    },
    mounted() {
        api.employeeTotal().then(res => {
            this.total = res.data.data;
        })
    }
}
</script>

<style scoped>
    .root {
        height: 100%;
    }

    .top {
        height: 10%;
        display: flex; 
        margin: 0 20px;
        align-items: center; 
        justify-content: space-between;
        /* background-color: beige; */
    }

    .bottom {
        /* height: 80%; */
        margin: 0 20px;
        background-color: rgb(133, 133, 98);
    }

    .footer {
        /* height: 10%; */
        margin: 1%;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        /* background-color: black; */
    }
</style>